
.control-button {
  @include control-focus-border;
  padding: $control-v-padding $control-h-padding;
  border: 1px solid $control-border-color;
  border-radius: $border-radius;
  line-height: $control-line-height;
  font-size: $control-font-size;
  color: $control-text-color;
  cursor: pointer;
  display: inline-flex;
  align-items: center; // for .control-button__text
}

button.control-button { // resets for native <button>
  @include reset-appearance; // TODO: make a mixin
  background: none;
  font-family: inherit;
}

.control-button--highlighted {
  color: $link-color;
  border-color: $link-color;
}
